<!--
// +----------------------------------------------------------------------
// | Copyright (c) 2017 https://gitee.com/honoryao All rights reserved.
// +----------------------------------------------------------------------
// | Author: honoryao <2463523099@qq.com>
// +----------------------------------------------------------------------
// | Time: 2018/6/8   
// +----------------------------------------------------------------------
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind 绑定</title>
    <style>
        .classname {
            line-height: 30px;
            color: red;
        }

        .a {
            line-height: 30px;
            color: #ddd;
        }

        .b {
            line-height: 30px;
            color: #43FF5A;
        }
    </style>
</head>
<body>
<h1>v-bing 绑定</h1>
<hr>
<div id="app">
    <img :src="imgSrc" width="200px">
    <a :href="url" target="_blank">点击打开百度</a>
    <p :class="classname">1、绑定classA</p>
    <div :class="{a:isOk}">2、绑定class中的判断</div>
    <div :class="[classA,classB]">3、绑定class中的数组</div>
    <div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
    <div :style="{color:red,fontSize:font}">5、绑定style</div>
    <div :style="styleObject">6、用对象绑定style样式</div>
    <p>
        <input type="checkbox" id="isOk" v-model="isOk"><label for="isOk" v-text="isOk"></label>
    </p>
</div>

<script src="../assets/js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: 'http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg',
            url: 'http://baidu.com/',
            classname: 'classname',
            classA: 'a',
            classB: 'b',
            isOk: true,
            red: 'red',
            font: '15px',
            styleObject: {
                fontSize: '24px',
                color: 'green'
            }
        }
    });
</script>
</body>
</html>